import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { LogoIcon, WalletIcon, IssuerIcon, VerifierIcon } from '../assets/icons';

const Navbar = () => {
  const location = useLocation();
  const [scrolled, setScrolled] = useState(false);
  
  // 检查当前路径是否匹配给定的链接路径
  const isActive = (path) => {
    if (path === '/') {
      return location.pathname === path;
    }
    return location.pathname.startsWith(path);
  };

  // 监听滚动事件，改变导航栏样式
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 20) {
        setScrolled(true);
      } else {
        setScrolled(false);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  
  // 初始化Bootstrap的导航栏折叠功能
  useEffect(() => {
    // 确保Bootstrap JS已加载
    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
      // 确保Bootstrap已完全加载
      const initNavbar = () => {
        const navbarToggler = document.querySelector('.navbar-toggler');
        if (navbarToggler) {
          // 给所有链接添加关闭菜单的功能
          const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
          navLinks.forEach(link => {
            link.addEventListener('click', () => {
              const navbarCollapse = document.querySelector('.navbar-collapse');
              if (navbarCollapse && navbarCollapse.classList.contains('show')) {
                navbarToggler.click();
              }
            });
          });
        }
      };
      
      // 等待DOM加载完成
      if (document.readyState === 'complete') {
        initNavbar();
      } else {
        window.addEventListener('load', initNavbar);
        return () => window.removeEventListener('load', initNavbar);
      }
    }
  }, []);

  return (
    <nav className={`navbar navbar-expand-lg fixed-top ${scrolled ? 'scrolled' : ''}`}>
      <div className="container">
        <Link className="navbar-brand d-flex align-items-center" to="/">
          <LogoIcon />
          <span className="ms-2"><strong>EduVerse</strong> Credentials</span>
        </Link>
        
        <button 
          className="navbar-toggler" 
          type="button" 
          data-bs-toggle="collapse" 
          data-bs-target="#navbarNav"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav ms-auto">
            <li className="nav-item">
              <Link 
                className={`nav-link ${isActive('/') ? 'active' : ''}`} 
                to="/"
              >
                首页
              </Link>
            </li>
            <li className="nav-item">
              <Link 
                className={`nav-link d-flex align-items-center ${isActive('/wallet') ? 'active' : ''}`} 
                to="/wallet"
              >
                <WalletIcon />
                <span className="ms-1">钱包应用</span>
              </Link>
            </li>
            <li className="nav-item">
              <Link 
                className={`nav-link d-flex align-items-center ${isActive('/issuer') ? 'active' : ''}`} 
                to="/issuer"
              >
                <IssuerIcon />
                <span className="ms-1">发行方门户</span>
              </Link>
            </li>
            <li className="nav-item">
              <Link 
                className={`nav-link d-flex align-items-center ${isActive('/verifier') ? 'active' : ''}`} 
                to="/verifier"
              >
                <VerifierIcon />
                <span className="ms-1">验证方接口</span>
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
};

export default Navbar; 